Chapter 19: Adding and Editing Todos

Now, let’s go on to implement adding a todo. When a user logs in and clicks ‘Add Todo’ (fig. 1), we will render the

AddTodo component for the user to submit a todo (fig. 2).

Figure 1

Figure 2

We will also use the AddTodo component to edit a todo. That is, when a user clicks on the ‘Edit’ link on an existing

todo.

When editing, we will render the AddTodo component but with the header ‘Edit Todo’ (fig. 3). The existing todo

title and memo will be shown where users can then edit and submit.

Figure 3